<template>
  <el-card :body-style="{ padding: '0px' }" class="filter-item" :shadow="'hover'" @click.native="openDetail()">
    <img :src="item.pic" class="image" >
    <div style="padding: 14px;">
      <div class="bottom clearfix">
        <span>{{item.name}}</span>
        <span class="l">{{item.levelName}}</span>
      </div>
    </div>
  </el-card>
</template>
<script>
  export default {
    props: {
      index: {
        type: Number
      },
      item: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {};
    },
    methods: {
      openDetail() {
        // person-detail/edit 会显示编译人员按钮，person-detail/focus 会显示关注按钮
        this.$router.push('/focus-manage/person-detail/edit/' + this.item.id);
      }
    }
  };
</script>
<style  type="text/scss" lang="scss" scoped>
  .filter-item {
    margin: 8px 10px;
    width: 140px;
    float: left;
  }
  .image {
    width: 100%;
    display: block;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
    .l {
      float: right;
      color: #ff6600;
    }
  }

  .button {
    padding: 0;
    float: right;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }
  .mark {
    color: #2356ce;
    cursor: pointer;
  }
  .content {
    padding: 10px 15px;
    text-indent: 2em;

    .col-item {
      margin-right: 15px;
    }
  }
</style>